tag-select 标签选择

更新时间：2022-02-16

tag-select 标签选择组件

标签选择组件

属性说明：

属性名	类型	默认值	必填	说明
class-name	String	无	否	自定义类名
value	String	无	否	选项标识
voiceTag	String	无	否	语音识别命令
clearVoiceTag	String	无	否	清除语音识别命令
checked	Boolean	false	否	未选中
showClear	Boolean	false	否	显示 close icon
disabled	Boolean	无	否	是否禁用
disabled-voice	Boolean	无	否	禁用语音
type	String	normal	否	类型 normal 普通，small 小号
bindclose	function	无	否	点击 close icon

示例：

json:

{
    "navigationBarTitleText": "iov-tag 组件",
    "usingComponents": {
        "iov-tag": "iov-ui/lib/tag-select"
    }
}

swan:

<view class="test">
    <view class="title">
        normal
    </view>
    <view>
        <iov-tag data-key="a" bindchange="change" checked="{{a}}" type="normal" class="item">
            分类
        </iov-tag>
        <iov-tag data-key="b" bindchange="change" checked="{{b}}" class="item" class-name="aaa">
            分类
        </iov-tag>
        <iov-tag data-key="c" bindchange="change" disabled="{{true}}" class="item" class-name="aaa">
            分类
        </iov-tag>
        <iov-tag data-key="d" bindchange="change" checked="{{true}}" disabled="{{true}}" class="item" class-name="aaa">
            分类
        </iov-tag>
    </view>
    
    <view class="title">
        small
    </view>
    <view>
        <iov-tag data-key="e" bindchange="change" checked="{{e}}" type="small" class="item">
            分类
        </iov-tag>
        <iov-tag data-key="f" bindchange="change" checked="{{f}}" type="small" checked="{{true}}" class="item" class-name="aaa">
            分类
        </iov-tag>
        <iov-tag type="small" disabled="{{true}}" class="item" class-name="aaa">
            分类
        </iov-tag>
        <iov-tag type="small" checked="{{true}}" disabled="{{true}}" class="item" class-name="aaa">
            分类
        </iov-tag>
    </view>
</view>

js:

Page({
    data: {
        
    },
    change(e) {
        console.log(e);
        const key = e.currentTarget.dataset.key;
        this.setData({
            [key]: !this.data[key]
        });
    }
});

tag 标签 textfield 输入框